<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define drawing parameters
        const centerX = 225;
        const centerY = 175;
        const radiusR = 120;
        const dotRadius = 3;

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the main circle
        ctx.beginPath();
        ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the center dot
        ctx.beginPath();
        ctx.arc(centerX, centerY, dotRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 3. Draw the radius line and label 'R'
        const angleR = -Math.PI / 4; // 45 degrees up and to the right
        const endRX = centerX + radiusR * Math.cos(angleR);
        const endRY = centerY + radiusR * Math.sin(angleR);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(endRX, endRY);
        ctx.stroke();

        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('R', centerX + 30, centerY - 15);

        // 4. Draw the field dots (assuming a symmetric 8-dot arrangement)
        const fieldDotCircleRadius = radiusR * 0.7;
        for (let i = 0; i < 8; i++) {
            const angle = (i * Math.PI) / 4;
            const dotX = centerX + fieldDotCircleRadius * Math.cos(angle);
            const dotY = centerY + fieldDotCircleRadius * Math.sin(angle);
            ctx.beginPath();
            ctx.arc(dotX, dotY, dotRadius, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 5. Draw the label 'E'
        ctx.fillText('E', centerX - 70, centerY - 25);


        // 6. Draw the electron (e-) and its velocity arrow
        const electronX = centerX;
        const electronY = centerY + radiusR + 80;

        // Electron dot
        ctx.beginPath();
        ctx.arc(electronX, electronY, dotRadius + 1, 0, 2 * Math.PI);
        ctx.fill();

        // Electron label 'e⁻'
        ctx.font = 'italic 20px Times New Roman';
        // The superscript minus sign is Unicode U+207B
        ctx.fillText('e\u207B', electronX + 18, electronY);
        
        // Velocity arrow
        const arrowStartY = electronY - 15;
        const arrowEndY = centerY + radiusR + 10;
        const arrowHeadSize = 10;

        ctx.beginPath();
        ctx.moveTo(electronX, arrowStartY);
        ctx.lineTo(electronX, arrowEndY);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(electronX, arrowEndY);
        ctx.lineTo(electronX - arrowHeadSize / 2, arrowEndY + arrowHeadSize);
        ctx.moveTo(electronX, arrowEndY);
        ctx.lineTo(electronX + arrowHeadSize / 2, arrowEndY + arrowHeadSize);
        ctx.stroke();

    </script>
</body>
</html>